<!-- 红包管理 -->
<template>
  <div class="table">
    <div class="container">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <el-icon>
              <Search />
            </el-icon> 查询条件：
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row :gutter="10">
        <el-col :xl="6" :lg="8" :md="12" :sm="24" style="margin-bottom:10px">
          <el-input v-model.trim="searchCondition.store_name" placeholder="店铺" clearable></el-input>
        </el-col>
        <el-col :xl="6" :lg="8" :md="12" :sm="24" style="margin-bottom:10px">
          <el-input v-model.trim="searchCondition.contacts_name" placeholder="姓名" clearable></el-input>
        </el-col>
        <el-col :xl="6" :lg="8" :md="12" :sm="24" style="margin-bottom:10px">
          <el-input v-model.trim="searchCondition.mobile" placeholder="手机号" clearable></el-input>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" style="margin-bottom:10px">
          <el-button type="success" :icon="Search" :disabled="disabledbtn" @click="searchInfo">搜索</el-button>
          <el-button type="warning" :icon="Refresh" :disabled="disabledbtn" @click="resetSearch">重置</el-button>
        </el-col>
      </el-row>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 查询结果：</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="handle-box">
        <el-button type="primary" :icon="Money" class="mr10" v-permission="'recharge'" :disabled="disabledbtn"
          @click="rechargeDialogVisible = true">充值
        </el-button>
      </div>
      <el-table :data="tableState.tableList" border class="table" ref="multipleTableRef" v-loading="tableLoading"
        :reserve-selection="true" @row-dblclick="rowDblclick">
        <el-table-column type="index" align="center"> </el-table-column>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="store_name" label="店铺" align="center">
          <template #default="scope">
            {{ [null, ''].includes(scope.row.store_name) ? '--' : scope.row.store_name }}
          </template>
        </el-table-column>
        <el-table-column prop="contacts_name" label="姓名" align="center">
          <template #default="scope">
            {{ [null, ''].includes(scope.row.contacts_name) ? '--' : scope.row.contacts_name }}
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="money" label="红包金额" align="center">
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" text :icon="View" @click="handleViewEdit(scope.row, 'view', '查看')">
              查看
            </el-button>
            <el-button type="primary" size="small" text :icon="More" @click="handleToRedEnvelopeInfo(scope.row)">明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background @update:current-page="handleCurrentChange" @update:page-size="handleSizeChange"
          layout="total, sizes, prev, pager, next,jumper" :page-size="searchCondition.size"
          :current-page="searchCondition.current" :page-sizes="pageSizes" :total="total" :hide-on-single-page="false">
        </el-pagination>
      </div>
    </div>

    <!-- 新增编辑查看弹出框 -->
    <el-dialog :title="dialogTitle" v-model="editVisible" width="60%" draggable
      :close-on-click-modal="closeOnClickModal" @closed="closedFormDialog">
      <el-form ref="redEnvelopeManagementFormRef" :model="redEnvelopeManagementForm" label-width="150px"
        v-loading="formLoading">
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="店铺：" prop="store_name">
              <el-input v-model.trim="redEnvelopeManagementForm.store_name" placeholder="店铺">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="姓名：" prop="type">
              <el-input v-model.trim="redEnvelopeManagementForm.contacts_name" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="10">
            <el-form-item label="手机号：" prop="name">
              <el-input v-model.trim="redEnvelopeManagementForm.mobile" placeholder="手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="金额：" prop="method">
              <el-input v-model.trim="redEnvelopeManagementForm.money" placeholder="金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <!-- <el-button type="primary" :disabled="disabledbtn" v-if="!isDisabledbtn"
            @click="submitForm('commonResourceInfo', getTableInfo)">确
            定
          </el-button> -->
        </span>
      </template>
    </el-dialog>

    <el-dialog title="充值" v-model="rechargeDialogVisible" width="30%" @closed="closedRechargeFormDialog">
      <el-form ref="rechargeFormRef" :model="rechargeForm" :rules="rules" label-width="150px" v-loading="formLoading">
        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item label="手机号：" prop="mobile">
              <el-input v-model.trim.number="rechargeForm.mobile" placeholder="手机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item label="充值金额：" prop="amount">
              <el-input v-model.trim="rechargeForm.amount" placeholder="充值金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-form-item label="商家备注：" prop="remark">
              <el-input v-model="rechargeForm.remark" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }"
                placeholder="商家备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="rechargeDialogVisible = false">取 消</el-button>
          <el-button type="primary" :disabled="disabledbtn"
            @click="putRedRechargeInfo('putRedRechargeInfo', searchInfo)">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import router from '@/router';
import { View, Search, Refresh, More, Money } from '@element-plus/icons-vue';
import { useRedEnvelopeStore } from '@/store/redEnvelope';
import { useTable } from '@/hooks/useTable.js';
import { useDialogForm } from '@/hooks/useDialogForm.js';
import useRules from '@/hooks/useRules.js';
const disabledbtn = ref(false);/* 按钮可用与不可用 */
const formLoading = ref(false);/* 表单loading状态 */
const redEnvelopeStore = useRedEnvelopeStore();
const rules = useRules('redEnvelopeManagementRules');/* 校验规则 */
let { total, pageSizes, multipleTableRef, tableLoading, tableState, searchCondition,
  handleCurrentChange, handleSizeChange, getTableInfo, searchInfo, resetSearch, rowDblclick } =
  useTable({
    store_name: '',
    mobile: '',
    contacts_name: '',
    current: 1,
    size: 10
  }, 'getRedEnvelopeManagementInfo', disabledbtn);

let { formRef: redEnvelopeManagementFormRef, formData: redEnvelopeManagementForm, methodType, isDisabledbtn,
  closeOnClickModal, dialogTitle, editVisible, closedFormDialog,
  submitForm } = useDialogForm({
    id: '',
    store_name: '',
    mobile: '',
    contacts_name: '',
    money: ''
  }, disabledbtn, handleCustomOperation, formLoading);


let { formRef: rechargeFormRef, formData: rechargeForm,
  editVisible: rechargeDialogVisible, closedFormDialog: closedRechargeFormDialog,
  submitForm: putRedRechargeInfo } = useDialogForm({
    mobile: '',
    amount: '',
    remark: ''
  }, disabledbtn, '', formLoading);

/* 点击编辑按钮 */
const handleViewEdit = (row, code, name) => {
  if ('view' === code) {
    dialogTitle.value = name;
    isDisabledbtn.value = true;
    closeOnClickModal.value = true;
  } else if ('edit' === code) {
    dialogTitle.value = name;
    methodType.value = 'PUT';
  }
  redEnvelopeManagementForm.id = row.id;
  redEnvelopeManagementForm.mobile = row.mobile;
  redEnvelopeManagementForm.contacts_name = row.contacts_name;
  redEnvelopeManagementForm.store_name = row.store_name;
  redEnvelopeManagementForm.money = row.money;

  editVisible.value = true;
}
/* 跳转到红包信息页面 */
const handleToRedEnvelopeInfo = (row) => {
  redEnvelopeStore.mobile = row.mobile
  router.push({
    name: 'redEnvelopeInfo'
  });
}

/* 关闭弹框以后的自定义操作 */
function handleCustomOperation () {
  redEnvelopeManagementForm.id = '';
}

getTableInfo();
</script>

<style scoped>
/* layout-布局 */
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.textAlignCenter {
  text-align: center;
}

/* 修改select的盒模型 */
.el-select {
  display: block;
}

/* 确定按钮的显示与隐藏 */
.displaybtn {
  display: none;
}

/* 修改该属性值  查询条件，查询结果得样式 */
.el-breadcrumb {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

/* 提示图标设置 */
.icon-wzg-config {
  height: 30px;
  line-height: 30px;
}

/* 修改Switch开关 */
.el-switch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
